class List {
  constructor() {
    // window.onscroll = this.lr.bind(this);
    // this.getGoods();
    this.ajax();
  }
  ajax() {
    // 1 调用ajax发送数据
    let xhr = new XMLHttpRequest();
    xhr.open('post', './data/list.php');
    xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
    xhr.send();
    // 2 接收结果进行提示
    xhr.onreadystatechange = () => {
      if (xhr.readyState == 4 && xhr.status == 200) {
        let str = xhr.responseText;
        str = JSON.parse(str);
        this.getGoods(str.data);
        // console.log(str);
      }
    }
  }
  /**********渲染页面的数据*******/
  // 需求:页面加载进来,就要渲染数据
  getGoods(data) {
    let str = '';
    data.forEach(ele => {
      // console.log(ele);
      //1 获取对象中的name,img,price等数据
      let {
        id,
        img,
        price,
        name
      } = ele;
      // 2 拼接到html中
      str += `<li><a href="proDetail.html">
      <dl><dt><img src="${img}"></dt>
      <dd>${name}</dd>
      <dd>￥${price}</dd></dl></a></li>`;
      // <a class="button" target="_blank" onclick="indexData.addCart(${id},'${name}','${src}','${price}',1)">
      // 立即抢购</a></div></div >
    });
    // console.log(str,$('.proList'));
    // 3 将拼接的数据追加到页面中
    $('.proList').html(str);
  }
  /********商品加入购物车*****/
  // addCart(id, name, src, price, num) {
  //   // console.log(1111);
  //   // console.log(id,name,src,price,num);
  //   // 1 判断有没有carts,即购物车是否有数据
  //   let cartGoods = localStorage.getItem('carts');
  //   // 2-1 有数据,则判断该商品是否存在
  //   if (cartGoods) {
  //     // 将购物车数据转化为对象
  //     cartGoods = JSON.parse(cartGoods);
  //     // console.log(cartGoods);
  //     // 2-1-1  设置商品是否存在的状态
  //     let state = true;
  //     cartGoods.forEach(ele => {
  //       // 2-2  当前添加的商品存在就增加数量
  //       if (ele.gid == id) {
  //         // 商品数量增加了,就更改状态
  //         ele.gnum = ele.gnum - 0 + num;
  //         state = false;
  //       }
  //     });
  //     // console.log(cartGoods);
  //     // 2-3不存在就新增一条数据
  //     if (state) {
  //       let goodsObj = {
  //         gid: id,
  //         gname: name,
  //         gsrc: src,
  //         gprice: price,
  //         gnum: 1
  //       };
  //       cartGoods.push(goodsObj);
  //     }
  //     // 2-4将数据转化为json,存储
  //     localStorage.setItem('carts', JSON.stringify(cartGoods));
  //   } else {
  //     // 3-1没有数据,新增购物车数据
  //     // 3-1-1一条商品信息,就是一个对象
  //     let goodsObj = {
  //       gid: id,
  //       gname: name,
  //       gsrc: src,
  //       gprice: price,
  //       gnum: num
  //     };
  //     // 3-1-2 声明数组carts,保存单个商品数据对象
  //     let cartsArr = [];
  //     cartsArr.push(goodsObj);
  //     // console.log(cartsArr);
  //     // 3-2 保存到localstorage中
  //     localStorage.setItem('carts', JSON.stringify(cartsArr));
  //   }
  // }
  // // 懒人加载
  // // 绑定滚动事件
  // lr() {
  //   // console.log(6666);
  //   // 获取内容的高度
  //   var ct = all('.goodsCon')[all('.goodsCon').length - 1].offsetTop;
  //   var st = this.getScTop();
  //   var clintTop = this.getClient().h;
  //   // 内容的高度<可视区的高度+滚动条的高度,就需要重新加载数据
  //   if (ct < (st + clintTop)) {
  //     console.log(ct);
  //     this.get('server.php', res => {
  //       this.getGoods(JSON.parse(res));
  //     });
  //   }
  // }
  // // 可视区高度,宽度
  // getClient() {
  //   return {
  //     h: window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight,
  //     w: window.innerWidth || document.body.clientWidth || document.documentElement.clientWidth
  //   }
  // }
  // // 滚动条高度
  // getScTop() {
  //   return window.pageYOffset || document.body.scrollTop;
  // }
  // // get请求方式
  // get(url, cb) {
  //   let xhr = new XMLHttpRequest();
  //   // 2打开请求资源
  //   // xhr.open('get', './01-get.php');  // 第一个参数是请求的方式,第二个是请求地址
  //   xhr.open('get', url);
  //   // 3 发送请求
  //   xhr.send();
  //   xhr.onreadystatechange = function () {
  //     if (xhr.readyState == 4 && xhr.status == 200) {
  //       // 存在并且调用
  //       cb && cb(xhr.response);
  //     }
  //   };
  // }
}
let listData = new List();